import { useSelector } from 'react-redux'
import { deleteTodo } from '../store/todoSlice'
import { useDispatch } from 'react-redux'
const TodoList = () => {
    const list = useSelector(state => state.todo.list)
    const dispatch = useDispatch()
    return (<div>
        <ul className='list-group' style={{ width: '80%', marginTop: '10px' }}>
            {list?.map((item, index) => {
                return (
                    <li className='list-group-item d-flex justify-content-between' key={index}>
                        {item}
                        <button className='btn btn-danger' onClick={() => dispatch(deleteTodo(item))}>删除</button>
                    </li>
                )
            })}


        </ul>
    </div>);
};

export default TodoList;